<template>
    <div style="width: 33%;">
      <div class="h">{{title}}</div>
  
      <div id="man" ref="myref"></div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import * as echarts from "echarts";
  import { onMounted, ref } from "vue";
  let { data, title, color } = defineProps(["data", "title","color"]);
  
  let myref = ref();
  onMounted(() => {
    var myChart = echarts.init(myref.value);
    myChart.setOption({
      tooltip: {
        trigger: "item"
      },
    //   legend: {
    //     top: "5%",
    //     left: "center"
    //   },
      legend: {
        top: "1%",
        left: "26",
        itemHeight: 5,
        itemWidth: 5,
        icon:'circle'
      },
  
      grid: {
        top: "50%"
      },
      color: color,
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "top"
          },
          top: "8%",
          bottom: -20,
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
  
          data: data,
        }
      ]
    });
  });
  </script>
  
  <style scoped>
  #man {
    width: 300px;
    height: 200px;
  }
  .h {
    text-align: center;
    color: rgb(17, 184, 184);
    font-size: 13px;
    line-height: 30px;
    
  }
  </style>